<template>
  <div class='body_box'>
    <div class='main_box'>
      <div :class="version == 'old'?'hover_nav tab_nav':'tab_nav'" @click="changeTab('old')">
        旧版本(3500起征)
        <div class='bottom_line' v-if="version == 'old'"></div>
      </div>
      <div :class="version != 'old'?'hover_nav tab_nav':'tab_nav'" @click="changeTab('new')">
        新版(5000起征)
        <div class='bottom_line' v-if="version != 'old'"></div>
      </div>
      <div class='box_title'>税前工资</div>
      <input placeholder='请输入税前工资' class='money' v-model="money" type='number' @input="computerMoney()">
      <div class='box_title'>五险一金</div>
      <input placeholder='请输入五险一金' class='money' v-model="insurance" type='number' @input="computerMoney()">
      <div class='calculator_top'>
        <div class='calculator_title'>
          <div class='calculator_left'>应纳所得额</div><div class='calculator_right'>{{firMoney}}</div>
        </div>
        <div class='calculator_title'>
          <div class='calculator_left'>速算扣除数</div><div class='calculator_right'>{{taxMoney}}</div>
        </div>
        <div class='calculator_title'>
          <div class='calculator_left'>税率</div><div class='calculator_right'>{{tax}}%</div>
        </div>
        <div class='calculator_title'>
          <div class='calculator_left'>应缴税款</div><div class='calculator_right'>{{lastMoney}}</div>
        </div>
      </div>
      <div class='real_price'>
        <div class='real_left'>实发工资</div>
        <div class='real_right'>{{num}}</div>
      </div>
    </div>
    <div class='table_box'>
      <div class='tbale_th'>
        <div class='table_fir'>级数</div>
        <div class='table_sec'>应纳税得额</div>
        <div class='table_third'>税率</div>
        <div class='table_forth'>速算扣除数</div>
      </div>
      <div class='tbale_td' v-for="(item,index) in list" :key="index">
        <div class='table_fir'>{{index+1}}</div>
        <div class='table_sec'>{{item.text}}</div>
        <div class='table_third'>{{item.num}}</div>
        <div class='table_forth'>{{item.otherNum}}</div>
      </div>
    </div>
    <div class='tip_box'><span>应纳所得额</span>＝税前工资－起征点－五险一金</div>
    <div class='tip_box'><span>应纳税款</span>＝应纳所得税*税率－速算扣除数</div>
    <div class='tip_box'><span>实发工资</span>＝税前工资－五险一金－应纳税款</div>
  </div>
</template>

<script>
export default {
  name:'calculator',
  data() {
    return {
      version: 'old',
      list:[
        { text: '(0<X≤1,500)', num: '3%', otherNum: '0' },
        { text: '(1,500<X≤4,500)', num: '10%', otherNum: '105' },
        { text: '(4,500<X≤9,000)', num: '20%', otherNum: '555' },
        { text: '(9,000<X≤35,000)', num: '25%', otherNum: '1005' },
        { text: '(35,000<X≤55,000)', num: '30%', otherNum: '2755' },
        { text: '(55,000<X≤80,000)', num: '35%', otherNum: '5505' },
        { text: '(X>80,000)', num: '40%', otherNum: '13505' },
      ],
      tax: '', //税率
      taxMoney: '', //速算扣除数
      money: '', //税前工资
      firMoney: '', //应纳所得额
      lastMoney:'',//应缴税款
      insurance: '', //五险一金
      num: '',//税后薪资
    }
  },
  methods: {
    changeTab(type) {//起征点切换
      this.version = type
      this.computerMoney()
    },
    computerMoney() {
      let tax = ''
      let taxMoney = ''
      if (this.version == 'old' && this.money && this.insurance) {//3500起征点
        let lastNum = this.money - this.insurance - 3500 //纳税额
        if (lastNum <= 1500) {
          tax = 3
          taxMoney = 0
        } else if (lastNum > 1500 && lastNum <= 4500) {
          tax = 10
          taxMoney = 105
        } else if (lastNum > 4500 && lastNum <= 9000) {
          tax = 20
          taxMoney = 555
        } else if (lastNum > 9000 && lastNum <= 35000) {
          tax = 25
          taxMoney = 1005
        } else if (lastNum > 35000 && lastNum <= 55000) {
          tax = 30
          taxMoney = 2755
        } else if (lastNum > 55000 && lastNum <= 80000) {
          tax = 35
          taxMoney = 5505
        } else if (lastNum > 80000) {
          tax = 45
          taxMoney = 13505
        }
        this.tax = tax
        this.taxMoney = taxMoney
        this.firMoney = lastNum
        this.lastMoney = lastNum * tax * 0.01 - taxMoney
        this.num = this.money - this.insurance - (lastNum * tax * 0.01 - taxMoney)
      } else if (this.version == 'new' && this.money && this.insurance) {//5000起征点
        let lastNum = this.money - this.insurance - 5000 //纳税额
        if (lastNum <= 3000) {
          tax = 3
          taxMoney = 0
        } else if (lastNum > 3000 && lastNum <= 12000) {
          tax = 10
          taxMoney = 210
        } else if (lastNum > 12000 && lastNum <= 25000) {
          tax = 20
          taxMoney = 1410
        } else if (lastNum > 25000 && lastNum <= 35000) {
          tax = 25
          taxMoney = 2660
        } else if (lastNum > 35000 && lastNum <= 55000) {
          tax = 30
          taxMoney = 4410
        } else if (lastNum > 55000 && lastNum <= 80000) {
          tax = 35
          taxMoney = 7160
        } else if (lastNum > 80000) {
          tax = 45
          taxMoney = 15160
        }
        this.tax = tax
        this.taxMoney = taxMoney
        this.firMoney = lastNum
        this.lastMoney = lastNum * tax * 0.01 - taxMoney
        this.num = this.money - this.insurance - (lastNum * tax * 0.01 - taxMoney)
      }
    },
  }
}
</script>


<style scoped>
.body_box{
  overflow: hidden;
  /* background: url(http://www.zgsccbs.com/skz/program/gsjsq.png) #F2F7FA; */
  background-size: 100% 2.83rem;
  background-repeat: no-repeat;
  padding-bottom: 0.62rem;
}
.main_box{
  background: #fff;
  overflow: hidden;
  padding: 0.4rem 0.3rem 0.5rem;
  margin: 0 0.3rem;
  border-radius:0.1rem;
  margin-top: 2.23rem;
  box-shadow:0px 2px 50px 0px rgba(0,144,255,0.06);
}
.tab_nav{
  width: 50%;
  float:left;
  text-align: center;
  font-size: 14px;
  color: #666;
  font-weight:500;
  line-height:0.64rem;
  overflow: hidden;
  margin-bottom: 0.67rem;
}
.bottom_line{
  width: 0.8rem;
  height: 0.06rem;
  background: #316AD8;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.hover_nav{
  color: #316AD8;
  font-weight:bold;
  font-size: 15px;
}
.box_title{
  font-size: 14px;
  color: #333333;
  font-weight:500;
  clear: both;
  margin-top: 0.5rem;
}
input{
  border: none;
  outline: none;
}
.money{
  border-bottom: solid 1px #ECF0F7;
  padding-bottom: 0.3rem;
  margin-top: 0.4rem;
  color: #333333;
  font-weight:500;
  font-size: 14px;
  width: 100%;
}
/* 所得税 */
.calculator_top{
  overflow: hidden;
  margin: 0.35rem 0 0.25rem;
}
.calculator_title{
  color: #7B7C89;
  font-size: 12px;
  font-weight:500;
  clear: both;
  overflow: hidden;
  line-height: 0.5rem;
}
.calculator_left{
  float: left;
}
.calculator_right{
  float: right;
}
/* 实发工资 */
.real_price{
  color: #333333;
  font-size: 15px;
  font-weight:500;
}
.real_left{
  float: left;
}
.real_right{
  color: #FE2023;
  font-size: 16px;
  float: right;
}
/* 表格 */
.table_box{
  overflow: hidden;
  background: #fff;
  margin: 0.28rem 0.3rem 0.45rem;
  box-shadow:0px 2px 50px 0px rgba(0,144,255,0.06);
  border-radius:0.1rem;
  font-size: 14px;
}
.tbale_th,.tbale_td{
  height: 0.98rem;
  line-height: 0.98rem;
  text-align: center;
}
.tbale_th{
  background: #FCFBFB;
  border-bottom: solid 1px #EBEBEB;
  color: #333333;
}
.tbale_td{
  color: #666666;
  border-bottom: solid 1px #EBEBEB;
}
.tbale_td:last-child{
  border-bottom: none;
}
.table_fir{
  float: left;
  width: 14%;
  text-align: center;
}
.table_sec{
  float: left;
  width: 40%;
  text-align: center;
}
.table_third{
  float: left;
  width: 12%;
  text-align: center;
  margin-left: 6%;
}
.table_forth{
  float: left;
  width: 28%;
  text-align: center;
}
.tip_box{
  color: #7B7C89;
  font-size: 14px;
  font-weight:500;
  line-height:0.62rem;
  margin-left: 0.6rem;
}
.tip_box span{
  color: #F5861A;
}
</style>
